<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<title><{config_item('manager_title')}></title>
	<link href="/public/H-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
	<link href="/public/H-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
	<link href="/public/H-ui/hui-iconfont/iconfont.css" rel="stylesheet" type="text/css">
	<link href="/public/H-ui/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="pd-20">
	<form action="<{site_url('/manager/goods/goods/save')}>" method="post" class="form form-horizontal" id="add" enctype="multipart/form-data">
		<input type="hidden" name="id" value="">
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品标题：</label>
			<div class="formControls col-10">
				<input type="text" class="input-text" value="" name="name" datatype="*1-50" nullmsg="商品标题不能为空">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>分类栏目：</label>
			<div class="formControls col-2"> <span class="select-box">
				<select name="cat_id" class="select" datatype="*" nullmsg="请选择分类" onchange="cat_id_select(this.value)">
					<option value="">请选择分类</option>
					<!--分类模板-->
					<{function name=type level=0}>
					<{foreach $data as $key}>
						<option value="<{$key.id}>"><{section name=loop loop=$level}>├<{/section}><{$key.name}></option>
					<{call name=type data=$key.down level=$level+1}>
					<{/foreach}>
					<{/function}>
					<!--调用模板函数-->
					<{call name=type data=$cat_list}>
				</select>
				</span>
			</div>
			<label class="form-label col-1"><span class="c-red">*</span>商户：</label>
			<div class="formControls col-2"> <span class="select-box">
				<select name="shop_id" class="select">
					<{foreach $shop_list as $k}>
					<option value="<{$k.m_id}>"><{$k.shop_name}></option>
					<{/foreach}>
				</select>
				</span>
			</div>
			<label class="form-label col-1">品牌：</label>
			<div class="formControls col-2"> <span class="select-box">
				<select name="brand_id" class="select">
					<option value="0">请选择品牌</option>
					<{foreach $brand_list as $k}>
					<option value="<{$k.id}>"><{$k.name}></option>
					<{/foreach}>
				</select>
				</span>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>是否上架：</label>
			<div class="formControls col-2 skin-minimal">
				<div class="radio-box">
					<input type="radio" id="type-0" name="status" value="0" checked>
					<label for="type-0">上架</label>
				</div>
				<div class="radio-box">
					<input type="radio" id="type-2" name="status" value="2">
					<label for="type-2">下架</label>
				</div>
				<div class="radio-box" style="display: none">
					<input type="radio" id="type-3" name="status" value="3">
					<label for="type-3">待审</label>
				</div>
				<div class="radio-box" style="display: none">
					<input type="radio" id="type-4" name="status" value="4">
					<label for="type-4">审核拒绝</label>
				</div>
			</div>
			<label class="form-label col-1"><span class="c-red">*</span>单位：</label>
			<div class="formControls col-2">
				<input type="text" name="unit" value="件" class="input-text" datatype="*" nullmsg="计量单位不能为空">

			</div>
			<label class="form-label col-1"><span class="c-red">*</span>排序：</label>
			<div class="formControls col-2">
				<input type="text" name="sortnum" value="99" class="input-text" datatype="n" nullmsg="排序不能为空" errormsg="排序只能是数字">

			</div>
		</div>
		<div class="row cl">
			<div class="col-10 col-offset-2">
				<button onClick="$('#add').submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存并提交审核</button>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2">商品SKU：</label>
			<div class="formControls col-10">
				<table style="width: auto;" class="table table-border table-bordered table-bg table-hover table-sort" id="spec_list_th">
					<thead>
					<tr class="text-c">
						<th width="100">商品货号</th>
						<th width="70">库存</th>
						<th width="70">市场价格</th>
						<th width="70">销售价格</th>
						<th width="70">重量(克)</th>
						<th width="70">起订量</th>
						<th width="40">操作</th>
					</tr>
					</thead>
					<tbody id="spec_list">

					</tbody>
				</table>
				<!--规格名称模板-->
				<script type='text/html' id='spec_th_valueTemplate'>
					{{each}}
					<th width="{{if $value.type==1}}70{{else}}170{{/if}}">
						<input type="text" class="input-text" value="{{if $value.spec_num}}{{if $value.spec_num==1}}颜色{{else if $value.spec_num==2}}尺寸{{else if $value.spec_num==3}}型号{{else if $value.spec_num==4}}规格{{/if}}{{else}}{{$value.name}}{{/if}}" name="spec_name[]" style="width: 50px;" datatype="*" nullmsg="规格名称不能为空">
						<input type="hidden" value="{{$value.type}}" name="spec_name_type[]">
						<a><i class="Hui-iconfont">&#xe6a6;</i></a>
					</th>
					{{/each}}
				</script>
				<!--动态规格值模板-->
				<script type='text/html' id='spec_valueTemplate'>
					{{each}}
					<td>
						{{if $value.type==1}}
						<!--文本-->
						<input type="text" class="input-text" value="{{$value.value}}" name="spec_value[{{$value.spec_num}}][]" style="width: 80px;" datatype="*" nullmsg="规格值不能为空">
						<input type="hidden" value="{{$value.note}}" name="spec_value_note[{{$value.spec_num}}][]">
						{{else if $value.type==2}}
						<!--图片-->
						<a><img src="{{$value.value}}" width="30"></a>
						<input type="text" class="input-text" value="{{$value.note}}" name="spec_value_note[{{$value.spec_num}}][]" style="width: 60px;" datatype="*" nullmsg="图片规格备注不能为空" placeholder="备注">
						<input type="hidden" value="{{$value.value}}" name="spec_value[{{$value.spec_num}}][]" datatype="*" nullmsg="图片规格值不能为空">
						<input type="file" id="spec_value_img_{{$value.spec_num}}_{{$value.sv}}" name="spec_value_img_{{$value.spec_num}}_{{$value.sv}}" onchange="upload_file(this);" style="width: 60px;">
						{{/if}}
					</td>
					{{/each}}
				</script>
				<!--规格列表模板-->
				<script type='text/html' id='spec_listTemplate'>
					{{each}}
					<tr class="text-c">
						<td>
							<input type="hidden" name="sku_id[]" value="{{$value.id}}">
							<input type="text" class="input-text" value="{{$value.sku_no}}" name="sku_no[]" style="width: 120px;" datatype="*" nullmsg="商品货号不能为空">
						</td>
						<td>
							<input type="text" class="input-text" value="{{$value.store_nums}}" name="store_nums[]" style="width: 60px;" datatype="n" nullmsg="库存不能为空" errormsg="库存只能是数字">
						</td>
						<td>
							<input type="text" class="input-text" value="{{$value.market_price}}" name="market_price[]" style="width: 60px;" datatype="price" nullmsg="市场价格不能为空" errormsg="市场价格格式错误">
						</td>
						<td>
							<input type="text" class="input-text" value="{{$value.sell_price}}" name="sell_price[]" style="width: 60px;" datatype="price" nullmsg="销售价格不能为空" errormsg="销售价格格式错误">
						</td>
						<td>
							<input type="text" class="input-text" value="{{$value.weight}}" name="weight[]" style="width: 60px;" datatype="n" nullmsg="重量不能为空" errormsg="重量只能是数字">
						</td>
						<td>
							<input type="text" class="input-text" value="{{if $value.minimum}}{{$value.minimum}}{{else}}1{{/if}}" name="minimum[]" style="width: 60px;" datatype="n" nullmsg="起订量不能为空" errormsg="起订量只能是数字">
						</td>
						<td class="f-14 spec_delete">{{if $index>0}}<i id="delete_tr" class="Hui-iconfont">&#xe609;</i>{{/if}}</td>
					</tr>
					{{/each}}
				</script>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2"></label>
			<div class="formControls col-10">
				<button onClick="add_spec();" class="btn btn-primary radius" type="button">添加商品SKU</button>
				<button onClick="add_spec_th(1)" class="btn btn-primary radius" type="button">添加文字规格</button>
				<button onClick="add_spec_th(2)" class="btn btn-primary radius" type="button">添加图片规格</button>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>模型：</label>
			<div class="formControls col-6"> <span class="select-box" style="width: 150px;">
				<select name="model_id" class="select">
					<option value="">选择模型</option>
				</select>
				</span>
				可以加入商品扩展属性，比如：型号，年代，款式...
			</div>
		</div>
		<div class="row cl" id="model_select" style="display: none">
			<label class="form-label col-2">扩展属性：</label>
			<div class="formControls col-8">
				<table class="table table-border table-bordered table-bg table-hover table-sort">
					<thead id="goods_model">

					</thead>
				</table>
				<!--商品模型模板-->
				<script type='text/html' id='goods_modelTemplate'>
					{{each}}
					<tr class="text-c">
						<th width="100">{{$value.name}}</th>
						<td class="text-l">

							<!--单选框-->
								{{if $value.type==1}}
								{{each $value.value as spec_value i}}
								<div class="radio-box">
									<input {{if $value.checked==spec_value}}checked{{/if}} type="radio" id="radio-{{$value.id}}{{i}}"  name="attr_id_{{$value.id}}" value="{{spec_value}}">
									<label for="radio-{{$value.id}}{{i}}">{{spec_value}}</label>
								</div>
								{{/each}}
							<!--复选框-->
								{{else if $value.type==2}}
								{{each $value.value as spec_value i}}
								<div class="radio-box">
									<input type="checkbox" id="checkbox-{{$value.id}}{{i}}" name="attr_id_{{$value.id}}[]" value="{{spec_value}}" {{each $value.checked as checked j}}{{if spec_value==checked}}checked{{/if}}{{/each}}>
									<label for="checkbox-{{$value.id}}{{i}}">{{spec_value}}</label>
								</div>
								{{/each}}
							<!--下拉框-->
								{{else if $value.type==3}}
								<span class="select-box" style="width: 150px;">
									<select name="attr_id_{{$value.id}}" class="select">
										{{each $value.value as spec_value i}}
										<option value="{{spec_value}}" {{if $value.checked==spec_value}}selected{{/if}}>{{spec_value}}</option>
										{{/each}}
									</select>
								</span>
							<!--输入框-->
								{{else if $value.type==4}}
								<input type="text" class="input-text" value="{{$value.checked}}" name="attr_id_{{$value.id}}" style="width: 200px;">
								{{/if}}
						</td>
					</tr>
					{{/each}}
				</script>
			</div>
		</div>

		<div class="row cl">
			<label class="form-label col-2">商品图片：</label>
			<div class="formControls col-10">
				<button class="btn btn-primary radius" type="button" id="select_goods_pic">选择图片</button>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2"></label>
			<input type="hidden" name="image" value="">
			<div class="formControls col-10" id="goods_list_pic">
				<!--商品图片-->
			</div>
			<!--商品图片模板-->
			<script type='text/html' id='goods_picTemplate'>
				{{each}}
				<li class="f-l mr-10 text-c l-24 f-12">
					<input type="hidden" name="image_list[]" value="{{$value.url}}">
					<img src="{{$value.url}}" width="100" height="100" class="{{if $value.url=='<{$item.image}>'}}goods_img_current{{else}}goods_img_border{{/if}}"><br>
					<a class="c-primary">删除</a>
				</li>
				{{/each}}
			</script>
		</div>
		<div class="row cl">
			<label class="form-label col-2">详细内容：</label>
			<div class="formControls col-10">
				<script type="text/javascript" src="/public/kindeditor/kindeditor.js"></script>
				<{load_editer('desc', $item.desc)}>
			</div>
		</div>
		<div class="row cl">
			<div class="col-10 col-offset-2">
				<button onClick="$('#add').submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存并提交审核</button>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</form>
</div>
</div>

<script type="text/javascript" src="/public/js/jquery.js"></script>
<script type="text/javascript" src="/public/js/validform.js"></script>
<script type="text/javascript" src="/public/js/layer/layer.js"></script>
<script type="text/javascript" src="/public/js/form.js"></script>
<script type="text/javascript" src="/public/js/artTemplate.js"></script>
<script type="text/javascript" src="/public/H-ui/js/H-ui.js"></script>
<script type="text/javascript" src="/public/H-ui/js/H-ui.admin.js"></script>
<{ajax_upload()}>
<{plupload('select_goods_pic',['num'=>5])}>
<script language="JavaScript">
	var spec_num = 0;
	$(function() {
		//验证表单
		$.Tipmsg.r = null;
		$("#add").Validform({
			tiptype: function (msg) {
				layer.msg(msg);
			},
			tipSweep: true,
			ajaxPost: true,
			callback: function (data) {
				if (data.status == "y") {
					layer_close();
				}
			}
		});
	});

	//选择分类加载品牌和模型
	function cat_id_select(cat_id) {
		//品牌
		$.ajax({
			type:"POST",
			url: '<{site_url("/manager/goods/goods/cat_brand/")}>',
			data: 'cat_id='+cat_id,
			dataType:"json",
			success: function(data){
				var brand_select_html = '<option value="0">请选择品牌</option>';
				var brand_selected = '';
				var brand_id = '<{$item.brand_id}>';
				if (data.status == 'y') {
					$.each(data.result, function(i,v){
						if (v.id == brand_id) {
							brand_selected = 'selected';
						} else {
							brand_selected = '';
						}
						brand_select_html += '<option value="'+ v.id+'" '+brand_selected+'>'+ v.name+'</option>';
					})
				}
				$('[name="brand_id"]').html(brand_select_html);
			}
		});

		//模型
		$.ajax({
			type:"POST",
			url: '<{site_url("/manager/goods/goods/cat_model/")}>',
			data: 'cat_id='+cat_id,
			dataType:"json",
			success: function(data){
				var model_select_html = '<option value="0">请选择模型</option>';
				var model_selected = '';
				var model_id = '<{$item.model_id}>';
				if (data.status == 'y') {
					$.each(data.result, function(i,v){
						if (v.id == model_id) {
							model_selected = 'selected';
							model_select(v.id);//设置默认模型
						} else {
							model_selected = '';
						}
						model_select_html += '<option value="'+ v.id+'" '+model_selected+'>'+ v.name+'</option>';
					})
				}
				$('[name="model_id"]').html(model_select_html);
			}
		});
	}

	//上传商品图片展示
	function show_plupload(data){
		var html = template('goods_picTemplate',[data]);
		$('#goods_list_pic').append(html);
	}

	//添加规格名称
	function  add_spec_th(spec_type){
		spec_num++;
		var all_spec_num = $("#spec_list_th th").length-5;//已经添加的规格个数
		if(all_spec_num>4){
			layer.msg('最多只能添加4个属性');
			return false;
		}
		var th_data = [{"type":spec_type,"spec_num":spec_num}];
		var spec_th_value = template('spec_th_valueTemplate', th_data);//规格标题
		$('#spec_list_th').find('th').eq(all_spec_num).before(spec_th_value);//规格标题
		var sv = 0;
		$('#spec_list >tr').each (function(){
			var value_data = [{"type":spec_type,"spec_value":"","spec_num":spec_num,"sv":sv}];
			var spec_value = template('spec_valueTemplate', value_data);//规格属性
			$(this).find('td').eq(all_spec_num).before(spec_value);
			sv++;
		})
	}

	//添加sku规格
	function add_spec(){
		var spec_list_value_old = $('#spec_list').find('tr').eq(0).clone();//缓存第一行的数据

		//添加删除按钮
		$('#spec_list').find('tr').eq(0).find('.spec_delete').html('<i id="delete_tr" class="Hui-iconfont">&#xe609;</i>');

		//清空第一行的数据
		$('#spec_list').find('tr').eq(0).find('img').attr('src','');//清除规格图片
		$('#spec_list').find('tr').eq(0).find('input').each(function(){
			//$(this).val('');//清空文本框的值
			if($(this).attr('name')=='sku_id[]')
			{
				$(this).val('');//设置skuid
			}
			if($(this).attr('name')=='store_nums[]')
			{
				$(this).val('100');//设置库存
			}
			if($(this).attr('name')=='sku_no[]')
			{
				$(this).val('<{time()}>-'+$("#spec_list tr").length);//设置货号
			}
			if($(this).attr('type')=='file')
			{
				$(this).attr('id',$(this).attr('id')+$("#spec_list tr").length);//设置图片id
				$(this).attr('name',$(this).attr('name')+$("#spec_list tr").length);//设置图片name
			}
		})
		$('#spec_list').append($('#spec_list').find('tr').eq(0).clone());//复制第一行的数据到最后
		$('#spec_list').find('tr').eq(0).replaceWith(spec_list_value_old);//还原第一行的数据
	}

	//添加规格图片展示
	function show_upload(spec_pic, url){
		$("#"+spec_pic).parents('td').find('img').attr('src',url);
		$("#"+spec_pic).parents('td').find('img').show();
		$("#"+spec_pic).parents('td').find('[type="hidden"]').val(url);
	}

	//模型加载
	function model_select(model_id){
		if(model_id=='')
		{
			$('#goods_model').html('');
			$('#model_select').hide();
			return false;
		}
		$.ajax({
			type:"POST",
			url: '<{site_url("/manager/goods/goods/goods_model_select/")}>',
			data: 'goods_id=<{$item.id}>&model_id='+model_id,
			dataType:"json",
			success: function(data){
				var html = template('goods_modelTemplate',data);
				$('#goods_model').html(html);
				$('#model_select').show();
			}
		});
	}

	$(function(){
		//模型选择
		$('[name="model_id"]').change(function(){
			model_select($(this).val());
		})

		//删除sku元素
		$('#spec_list').on('click', '#delete_tr', function(){
			$(this).parents("tr").remove();
		})

		//删除规格
		var index_td = '';
		$('#spec_list_th').on('click','a', function(){
			index_td = $(this).parent().index();
			$('#spec_list_th').find('th').eq(index_td).remove();
			$('#spec_list >tr').each (function(){
			$(this).find('td').eq(index_td).remove();
		})
		})

		//删除商品图片
		$('#goods_list_pic').on('click', 'a', function(){
			$(this).parents('li').remove();
			plupload_pic_num--;
			//没有选择默认图片的时候清空默认图片地址
			goods_img_current = $('#goods_list_pic').find('.goods_img_current').attr('src');
			if (goods_img_current===undefined || goods_img_current=='') {
			$('[name="image"]').val('');
		}
		})

		//选择商品默认图片
		$('#goods_list_pic').on('click', 'img', function(){
			$('#goods_list_pic img').removeClass('goods_img_current');
			$('#goods_list_pic img').addClass('goods_img_border');
			$(this).removeClass('goods_img_border');
			$(this).addClass('goods_img_current');
			$('[name="image"]').val($(this).attr('src'));
		})

		//表单回填
		var formObj = new Form();
		formObj.init(<{ch_json_encode($item)}>);

		//商品图片回填
		<{if $item.image_list!=''}>
		var html = template('goods_picTemplate',<{ch_json_encode($item.image_list)}>);
		$('#goods_list_pic').append(html);
		<{/if}>

		//设置默认商品sku
		<{if $item.sku_list!=''}>
			var spec_list_html = template('spec_listTemplate',<{ch_json_encode($item.sku_list)}>);
		<{else}>
			var spec_list_html = template('spec_listTemplate',[{"sku_no":"<{time()}>","store_nums":100,"value0":"","value1":"","value2":"","value3":""}]);//没有数据设置第一行默认数据
		<{/if}>
		$('#spec_list').append(spec_list_html);

		//设置默认规格标题
		<{if $item.spec_name!=''}>
			var spec_th_value = template('spec_th_valueTemplate', <{ch_json_encode($item.spec_name)}>);//规格标题
			$('#spec_list_th').find('th').eq(1).before(spec_th_value);//规格标题
		<{/if}>
		spec_num = <{count($item.spec_name)}>

		<{foreach $item.sku_list as $val=>$key}>
			var spec_value = template('spec_valueTemplate', <{ch_json_encode($key.value_list)}>);//规格属性
			$('#spec_list >tr').eq(<{$val}>).find('td').eq(1).before(spec_value)
		<{/foreach}>

		//分类默认数据加载
		<{if $item.cat_id!=''}>
			cat_id_select(<{$item.cat_id}>);
		<{/if}>
	})
</script>
</body>
</html>